<style scoped lang="scss">
.flow-library {
  user-select: none;
  width: 16%;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  border-right: 1px solid #dcdfe6;
  display: flex;
  flex-direction: column;
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  &-title {
    background-color: #ffffff;
    line-height: 48px;
    flex: 1;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &-list {
    //flex: 10;
  }

  &-group {
    display: flex;
    flex-wrap: wrap;
    padding: 8px 0 8px 16px;
  }

  &-item {
    width: 188px;
    height: 100%;
    //float: left;
    //text-align: center;
    display: flex;
    align-items: center;
    margin-right: 8px;
    margin-bottom: 8px;
    //flex-direction: column;

    &__img {
      width: 180px;
      height: 36px;
      margin-top: 8px;
      background-repeat: no-repeat;
      background-size: contain;
      cursor: pointer;
      position: relative;

      &--setting-shape {
        background-size: 32px;
        background-color: #5f95ff;
        background-position: 50% 15%;

        .flow-library-item__name {
          position: absolute;
          height: auto;
          width: 100%;
          font-size: 12px;
          cursor: pointer;
          text-align: center;
          bottom: 4px;
          opacity: 1;
        }
      }

      &--input {
        background-position: 50% 15%;
        border: 1px dashed gray;
        border-left: 4px solid #1879ff;
        color: #565758;
        border-radius: 5px;

        &:hover {
          box-sizing: content-box;
          background-color: #f0f7ff;
          border: 1px dashed #1879ff;
          border-left: 4px solid #1879ff;
        }

        .flow-library-item__name {
          position: absolute;
          height: auto;
          width: 100%;
          font-size: 12px;
          cursor: pointer;
          //text-align: center;
          bottom: 6px;
          opacity: 1;
        }
        .flow-library-item__icon {
          //position: absolute;
          width: 20px;
          height: 20px;
          flex-shrink: 0;
          margin-left: 8px;
          margin-top: 8px;
        }
      }
      &--output {
        background-position: 50% 15%;
        border: 1px dashed gray;
        border-left: 4px solid #1879ff;
        color: #565758;
        border-radius: 5px;

        &:hover {
          box-sizing: content-box;
          background-color: #f0f7ff;
          border: 1px dashed #1879ff;
          border-left: 4px solid #1879ff;
        }

        .flow-library-item__name {
          position: absolute;
          height: auto;
          width: 100%;
          font-size: 12px;
          cursor: pointer;
          //text-align: center;
          bottom: 6px;
          opacity: 1;
        }
        .flow-library-item__icon {
          //position: absolute;
          width: 20px;
          height: 20px;
          flex-shrink: 0;
          margin-left: 8px;
          margin-top: 8px;
        }
      }
      &--filterOpera {
        background-position: 50% 15%;
        border: 1px dashed gray;
        border-left: 4px solid #1879ff;
        color: #565758;
        border-radius: 5px;

        &:hover {
          box-sizing: content-box;
          background-color: #f0f7ff;
          border: 1px dashed #1879ff;
          border-left: 4px solid #1879ff;
        }

        .flow-library-item__name {
          position: absolute;
          height: auto;
          width: 100%;
          font-size: 12px;
          cursor: pointer;
          //text-align: center;
          bottom: 6px;
          opacity: 1;
        }
        .flow-library-item__icon {
          //position: absolute;
          width: 20px;
          height: 20px;
          flex-shrink: 0;
          margin-left: 8px;
          margin-top: 8px;
        }
      }
      &--default {
        background-position: 50% 15%;
        border: 1px dashed gray;
        border-left: 4px solid #1879ff;
        color: #565758;
        border-radius: 5px;

        &:hover {
          box-sizing: content-box;
          background-color: #f0f7ff;
          border: 1px dashed #1879ff;
          border-left: 4px solid #1879ff;
        }

        .flow-library-item__name {
          position: absolute;
          height: auto;
          width: 100%;
          font-size: 12px;
          cursor: pointer;
          //text-align: center;
          bottom: 6px;
          opacity: 1;
        }
        .flow-library-item__icon {
          //position: absolute;
          width: 20px;
          height: 20px;
          flex-shrink: 0;
          margin-left: 8px;
          margin-top: 8px;
        }
      }
      &--attrs {
        background-position: 50% 15%;
        border: 1px dashed gray;
        border-left: 4px solid #1879ff;
        color: #565758;
        border-radius: 5px;

        &:hover {
          box-sizing: content-box;
          background-color: #f0f7ff;
          border: 1px dashed #1879ff;
          border-left: 4px solid #1879ff;
        }

        .flow-library-item__name {
          position: absolute;
          height: auto;
          width: 100%;
          font-size: 12px;
          cursor: pointer;
          //text-align: center;
          bottom: 6px;
          opacity: 1;
        }
        .flow-library-item__icon {
          //position: absolute;
          width: 20px;
          height: 20px;
          flex-shrink: 0;
          margin-left: 8px;
          margin-top: 8px;
        }
      }
      &--standard {
        background-position: 50% 15%;
        border: 1px dashed gray;
        border-left: 4px solid #1879ff;
        color: #565758;
        border-radius: 5px;

        &:hover {
          box-sizing: content-box;
          background-color: #f0f7ff;
          border: 1px dashed #1879ff;
          border-left: 4px solid #1879ff;
        }

        .flow-library-item__name {
          position: absolute;
          height: auto;
          width: 100%;
          font-size: 12px;
          cursor: pointer;
          //text-align: center;
          bottom: 6px;
          opacity: 1;
        }
        .flow-library-item__icon {
          //position: absolute;
          width: 20px;
          height: 20px;
          flex-shrink: 0;
          margin-left: 8px;
          margin-top: 8px;
        }
      }
      &--deduplication {
        background-position: 50% 15%;
        border: 1px dashed gray;
        border-left: 4px solid #1879ff;
        color: #565758;
        border-radius: 5px;

        &:hover {
          box-sizing: content-box;
          background-color: #f0f7ff;
          border: 1px dashed #1879ff;
          border-left: 4px solid #1879ff;
        }

        .flow-library-item__name {
          position: absolute;
          height: auto;
          width: 100%;
          font-size: 12px;
          cursor: pointer;
          //text-align: center;
          bottom: 6px;
          opacity: 1;
        }
        .flow-library-item__icon {
          //position: absolute;
          width: 20px;
          height: 20px;
          flex-shrink: 0;
          margin-left: 8px;
          margin-top: 8px;
        }
      }
      &--pca {
        background-position: 50% 15%;
        border: 1px dashed gray;
        border-left: 4px solid #1879ff;
        color: #565758;
        border-radius: 5px;

        &:hover {
          box-sizing: content-box;
          background-color: #f0f7ff;
          border: 1px dashed #1879ff;
          border-left: 4px solid #1879ff;
        }

        .flow-library-item__name {
          position: absolute;
          height: auto;
          width: 100%;
          font-size: 12px;
          cursor: pointer;
          //text-align: center;
          bottom: 6px;
          opacity: 1;
        }
        .flow-library-item__icon {
          //position: absolute;
          width: 20px;
          height: 20px;
          flex-shrink: 0;
          margin-left: 8px;
          margin-top: 8px;
        }
      }
    }

    &__name {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      cursor: pointer;
      text-align: center;
      opacity: 0;
    }
  }
}

::v-deep .el-card {
  border: 0;
  box-shadow: 0 0 0 0;
}
</style>
<template>
  <div class="flow-library">
    <div class="flow-library-title"><span>组件库</span></div>
    <div class="flow-library-list" v-loading="loading">
      <el-collapse v-model="activeNames">
        <el-collapse-item
          v-for="item in list"
          :name="item.code"
          :key="item.code"
        >
          <template slot="title">{{ item.title }}</template>
          <div class="flow-library-group">
            <div
              class="flow-library-item"
              v-for="group in item.groups"
              :key="group.id"
            >
              <div
                class="flow-library-item__img"
                :class="'flow-library-item__img--' + group.shape"
                :data-name="group.name"
                :data-id="group.id"
                :data-image="group.image ? group.image : null"
                :data-shape="group.shape"
                :style="{
                  backgroundImage: `url(${group.image})`,
                }"
                :data-optName="group.optName"
                :data-optCode="group.optCode"
                @mousedown.stop="handleonAddNode"
              >
                <img :src="group.logo" alt="" class="flow-library-item__icon" />
                <span class="flow-library-item__name">{{ group.name }}</span>
              </div>
            </div>
          </div>
        </el-collapse-item>
        <!--                <el-collapse-item title="功能介绍" name="intro">-->
        <!--                    <el-card class="box-card">-->
        <!--                        <div class="text item">-->
        <!--                            {{ introInfo }}-->
        <!--                        </div>-->
        <!--                    </el-card>-->
        <!--                </el-collapse-item>-->
      </el-collapse>
    </div>
  </div>
</template>
<script>
import { SETTING_SHAPE_NAME, DAG_NAME_GROUP } from "../config";
import { mapGetters, mapActions } from "vuex";

export default {
  name: "FlowLibrary",
  data() {
    return {
      activeNames: [],
      // 过滤数据
      list: [],
      loading: true,
      // introInfo: this.$store.state.feCanvas.introduction
    };
  },
  computed: {
    introInfo() {
      return this.$store.state.feCanvas.introduction;
    },
  },
  watch: {
    introInfo: {
      handler(newVal) {
        // console.log(newVal)
      },
    },
  },
  created() {
    const list = [
      {
        title: "数据组件",
        code: "base",
        groups: [
          {
            id: "input",
            name: "文件输入",
            logo: require("../../../../../assets/icon/icon-system.png"),
            success: require("../../../../../assets/icon/icon-right.png"),
            failed: require("../../../../../assets/icon/icon-error.png"),
            running: require("../../../../../assets/icon/icon-refresh.png"),
            shape: DAG_NAME_GROUP["input"],
            optName: "文件输入",
            optCode: "fileUpload",
          },
          {
            id: "output",
            name: "文件输出",
            logo: require("../../../../../assets/icon/icon-system.png"),
            success: require("../../../../../assets/icon/icon-right.png"),
            failed: require("../../../../../assets/icon/icon-error.png"),
            running: require("../../../../../assets/icon/icon-refresh.png"),
            shape: DAG_NAME_GROUP["output"],
            optName: "文件输出",
            optCode: "fileOut",
          },
          {
            id: "default",
            name: "缺省值处理",
            logo: require("../../../../../assets/icon/icon-system.png"),
            success: require("../../../../../assets/icon/icon-right.png"),
            failed: require("../../../../../assets/icon/icon-error.png"),
            running: require("../../../../../assets/icon/icon-refresh.png"),
            shape: DAG_NAME_GROUP["default"],
            optName: "缺省值处理",
            optCode: "missing",
          },
          {
            id: "filterOpera",
            name: "过滤算子",
            logo: require("../../../../../assets/icon/icon-system.png"),
            success: require("../../../../../assets/icon/icon-right.png"),
            failed: require("../../../../../assets/icon/icon-error.png"),
            running: require("../../../../../assets/icon/icon-refresh.png"),
            shape: DAG_NAME_GROUP["filterOpera"],
            optName: "过滤算子",
            optCode: "filter",
          },
          {
            id: "attrs",
            name: "属性生成",
            logo: require("../../../../../assets/icon/icon-system.png"),
            success: require("../../../../../assets/icon/icon-right.png"),
            failed: require("../../../../../assets/icon/icon-error.png"),
            running: require("../../../../../assets/icon/icon-refresh.png"),
            shape: DAG_NAME_GROUP["attrs"],
            optName: "属性生成",
            optCode: "attributecreate",
          },
          {
            id: "standard",
            name: "数据标准化",
            logo: require("../../../../../assets/icon/icon-system.png"),
            success: require("../../../../../assets/icon/icon-right.png"),
            failed: require("../../../../../assets/icon/icon-error.png"),
            running: require("../../../../../assets/icon/icon-refresh.png"),
            shape: DAG_NAME_GROUP["standard"],
            optName: "数据标准化",
            optCode: "standard",
          },
          {
            id: "deduplication",
            name: "数据去重",
            logo: require("../../../../../assets/icon/icon-system.png"),
            success: require("../../../../../assets/icon/icon-right.png"),
            failed: require("../../../../../assets/icon/icon-error.png"),
            running: require("../../../../../assets/icon/icon-refresh.png"),
            shape: DAG_NAME_GROUP["deduplication"],
            optName: "数据去重",
            optCode: "duplicate",
          },
          {
            id: "pca",
            name: "主成分分析",
            logo: require("../../../../../assets/icon/icon-system.png"),
            success: require("../../../../../assets/icon/icon-right.png"),
            failed: require("../../../../../assets/icon/icon-error.png"),
            running: require("../../../../../assets/icon/icon-refresh.png"),
            shape: DAG_NAME_GROUP["pca"],
            optName: "主成分分析",
            optCode: "pca",
          },
        ],
      },
      // {
      //     title: '流程组件',
      //     code: 'custom',
    ];
    this.list = list;
    this.activeNames = [...list.map((item) => item.code), ...["intro"]];
    setTimeout(() => {
      this.loading = false;
    }, 1000);
    // 获取数据源...
  },
  methods: {
    handleonAddNode(e) {
      this.$emit("onAddNode", e);
    },
  },
};
</script>


